<script>
export default {
    name: "FeiyuCalendar"
}
</script>

<template>
    <div class="flex align-center column "
         style="background: #00BF98;width: 100%;height: fit-content;border-radius: 15px;">
        <el-calendar class="calendar">
            <template #header="{ date }">
                <span>{{ date }}</span>
            </template>
            <template #dateCell="{ data }">
                <div class="flex column center align-center">
                    <p style="margin: 0!important;" :class="data.isSelected ? 'is-selected' : ''">
                        {{ data.date.getDate() }}
                    </p>
                    <!--                                <div v-if="isToday(data.date)"  class="green budge"></div>-->
                </div>

            </template>
        </el-calendar>
    </div>
</template>

<style lang="scss" scoped>

.calendar:deep(.el-calendar__header) {
    background: #485b6e;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 0;
    padding-bottom: 0;
}

.calendar:deep(.el-calendar__body) {
    background: #485b6e;
    color: white;
    padding: 0;

    th {
        color: white;
        padding-top: 10px;
    }

    td {
        background: white;
        color: #304455;
    }

    .el-calendar-day {
        font-size: 13pt;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .prev {
        .el-calendar-day {
            color: #9b9c9d;
        }
    }
    .next {
        .el-calendar-day {
            color: #9b9c9d ;
        }
    }
    .is-today{
        .el-calendar-day {
            color: white;
            background: #25b591!important;
            border-radius: 50%;
        }
    }
    .is-selected{
        .el-calendar-day {
            color: white;
            background:#ee915c;
            border-radius: 50%;
        }
    }
}

</style>
